<template>
  <div class="demo-title">badge/demo2</div>
  <div class="demo">
    <div class="item">
      <div class="item-bg">
        <Badge :dot="true" color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Custom Color</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge value="New" color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Custom color</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge value="Gradient" color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Custom color</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge value="2" color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Custom Color</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import Badge from '@sscd-mobile/badge'
</script>
<style lang="less" scoped>
.demo {
  display: flex;
  justify-content: space-evenly;
  background-color: white;
  height: 100px;
  width: 100%;
  .item {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    align-items: center;
    .item-bg {
      width: 50px;
      height: 50px;
      .square {
        width: 40px;
        height: 40px;
        border-radius: 5px;
        background: #ececec;
      }
    }
  }
  p {
    font-size: 12px;
  }
}
</style>
